<template>
  <view class="page flex-col">
    <view class="box_1 flex-col">
      <view class="list_2 flex-col">
        <view
          class="list-items_1 flex-col"
          v-for="(item, index) in loopData0"
          :key="index"
        >
          <view class="group_5 flex-row">
            <view class="tag_1 flex-col">
              <text class="text_2" v-html="item.lanhutext0"></text>
            </view>
            <text class="text_3" v-html="item.lanhutext1"></text>
            <image
              class="icon_1"
              referrerpolicy="no-referrer"
              :src="item.lanhuimage0"
            />
          </view>
          <view class="group_6 flex-row">
            <text class="text_4" v-html="item.lanhutext2"></text>
            <image
              class="image_2"
              referrerpolicy="no-referrer"
              :src="item.lanhuimage1"
            />
            <text class="text_5" v-html="item.lanhutext3"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      loopData0: [
        {
          lanhutext0: '等待乘客下单',
          lanhutext1: '今天&nbsp;12:15',
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngba6fee0bd69096ebe3b08300799f5772396e869cf84ec407f2cf1394ffa33086',
          lanhutext2: '贵州省地质科技园…',
          lanhuimage1:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng79764686d051afeb7cca1b23ab67076b986f1e96a7119acf36a4692bb02e68f9',
          lanhutext3: '贵阳观山湖万达',
        },
        {
          lanhutext0: '等待乘客下单',
          lanhutext1: '今天&nbsp;12:15',
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngba6fee0bd69096ebe3b08300799f5772396e869cf84ec407f2cf1394ffa33086',
          lanhutext2: '贵州省地质科技园…',
          lanhuimage1:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng79764686d051afeb7cca1b23ab67076b986f1e96a7119acf36a4692bb02e68f9',
          lanhutext3: '贵阳观山湖万达',
        },
        {
          lanhutext0: '等待出发',
          lanhutext1: '今天&nbsp;12:15',
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngba6fee0bd69096ebe3b08300799f5772396e869cf84ec407f2cf1394ffa33086',
          lanhutext2: '贵州省地质科技园…',
          lanhuimage1:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng79764686d051afeb7cca1b23ab67076b986f1e96a7119acf36a4692bb02e68f9',
          lanhutext3: '贵阳观山湖万达',
        },
        {
          lanhutext0: '进行中',
          lanhutext1: '今天&nbsp;12:15',
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngba6fee0bd69096ebe3b08300799f5772396e869cf84ec407f2cf1394ffa33086',
          lanhutext2: '贵州省地质科技园…',
          lanhuimage1:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng79764686d051afeb7cca1b23ab67076b986f1e96a7119acf36a4692bb02e68f9',
          lanhutext3: '贵阳观山湖万达',
        },
        {
          lanhutext0: '行程结束',
          lanhutext1: '今天&nbsp;12:15',
          lanhuimage0:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngba6fee0bd69096ebe3b08300799f5772396e869cf84ec407f2cf1394ffa33086',
          lanhutext2: '贵州省地质科技园…',
          lanhuimage1:
            'https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng79764686d051afeb7cca1b23ab67076b986f1e96a7119acf36a4692bb02e68f9',
          lanhutext3: '贵阳观山湖万达',
        },
      ],
      constants: {},
    };
  },
  methods: {},
};
</script>
<style>
@import '/static/module/common.css';
.page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  width: 750rpx;
  height: 1333.3333333333333rpx;
  overflow: hidden;
}

.group_1 {
  width: 750rpx;
  height: 141.66666666666666rpx;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnge92b3569a81a5082933f654bdb32ab76f6b8365fe3ac0962ca9b5d95591f125f)
    100% no-repeat;
  background-size: 100% 100%;
  margin-top: 1.3888888888888888rpx;
}

.nav-bar_3 {
  width: 750rpx;
  height: 98.61111111111111rpx;
  margin-top: 43.75rpx;
}

.text_1 {
  width: 150rpx;
  height: 52.083333333333336rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 37.5rpx;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  line-height: 52.083333333333336rpx;
  margin: 20.833333333333332rpx 0 0 292.3611111111111rpx;
}

.applet-top-bar_1 {
  width: 181.94444444444446rpx;
  height: 66.66666666666667rpx;
  margin: 13.194444444444445rpx 31.944444444444443rpx 0 93.75rpx;
}

.image_1 {
  width: 750rpx;
  height: 0.6944444444444444rpx;
  margin: 141.66666666666666rpx 0 0 -750rpx;
}

.box_1 {
  width: 750rpx;
  height: 1190.9722222222222rpx;
  margin-bottom: 0.6944444444444444rpx;
}

.list_2 {
  width: 706.9444444444445rpx;
  height: 1013.8888888888889rpx;
  justify-content: space-between;
  margin: 29.86111111111111rpx 0 0 22.22222222222222rpx;
}

.list-items_1 {
  height: 186.11111111111111rpx;
  background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngaf2b2ad1116a40021e31f4893ea6c29bbf2824955c2adff1d58116fbd9439a23)
    100% no-repeat;
  background-size: 100% 100%;
  margin-bottom: 20.833333333333332rpx;
  width: 706.9444444444445rpx;
}

.group_5 {
  width: 647.2222222222222rpx;
  height: 64.58333333333333rpx;
  margin: 29.166666666666668rpx 0 0 28.47222222222222rpx;
}

.tag_1 {
  background-color: rgba(111, 198, 94, 1);
  border-radius: 37px;
  height: 51.388888888888886rpx;
  margin-top: 0.6944444444444444rpx;
  width: 173.61111111111111rpx;
}

.text_2 {
  width: 150rpx;
  height: 34.72222222222222rpx;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 25rpx;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 34.72222222222222rpx;
  margin: 9.027777777777779rpx 0 0 11.805555555555555rpx;
}

.text_3 {
  width: 173.61111111111111rpx;
  height: 52.083333333333336rpx;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 37.5rpx;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
  line-height: 52.083333333333336rpx;
  margin-left: 29.166666666666668rpx;
}

.icon_1 {
  width: 31.25rpx;
  height: 24.305555555555557rpx;
  margin: 40.27777777777778rpx 0 0 239.58333333333334rpx;
}

.group_6 {
  width: 568.75rpx;
  height: 40.97222222222222rpx;
  margin: 13.88888888888889rpx 0 37.5rpx 24.305555555555557rpx;
}

.text_4 {
  width: 314.5833333333333rpx;
  height: 40.97222222222222rpx;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 29.166666666666668rpx;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 40.97222222222222rpx;
}

.image_2 {
  width: 33.333333333333336rpx;
  height: 13.88888888888889rpx;
  margin: 13.88888888888889rpx 0 0 -25.694444444444443rpx;
}

.text_5 {
  width: 228.47222222222223rpx;
  height: 40.97222222222222rpx;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 29.166666666666668rpx;
  font-weight: normal;
  text-align: left;
  white-space: nowrap;
  line-height: 40.97222222222222rpx;
  margin-left: 18.055555555555557rpx;
}

</style>